<template>
  <view>
    <view class="salebox" v-for="(item, index) in houseList" :index="index" :key="index">
      <view class="left">
        <image class="img" :src="item.faceUrl" mode="aspectFill"></image>
        <view class="card-tag">推荐</view>
      </view>
      <view class="right" @click="todetail(item.id)" >
        <view class="title">{{item.villagetype}} {{item.decoration}}</view>
        <view class="content">
          <view class="content-left">{{item.houseNum}} &nbsp;&nbsp;&nbsp;&nbsp; {{item.houseArea}}㎡</view>
          <view class="content-right  totalprice">{{item.totalprice|ftotal}}万元</view>
        </view>
        <view class="village">
          <view class="content-left">{{item.villageName}} </view>
          <view class="content-right">{{item.everyprice}}元/㎡</view>
        </view>
        <view class="tag">
          <view class="content-tag" v-for="(tag,prop) in item.params" :key="prop">
            <u-tag :text="tag" size="mini" type="primary" plain></u-tag>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  filters: {
    ftotal(vale) {
      return Math.ceil(vale/10000)
    }
  },
  // 生命周期函数,页面一加载就获取数据
  onLoad() {
    // 获取房源
    this.findHouseList()
  },
  data() {
    return {
      houseList: [],
      page:1,
      size:10
    }
  },
  methods: {
		todetail(id){
			uni.navigateTo({
				url:`/pages/sale/showsale?id=${id}`
			})
		},
    // 查询房源的方法
    findHouseList() {
      // let url = "https://sourcebyte.vip/api/houseApi/findHouseRoomList";
      let url = `http://127.0.0.1/getSaleList/${this.page}/${this.size}`
      uni.request({
        url: url,
        success: (res) => {
          // console.log(res)
          this.houseList = res.data.rows
        }
      })
    }
  }
}
</script>

<style lang="scss">
.salebox {
  font: 400 14px/1.8 Arial, 'Helvetica Neue', Helvetica, sans-serif;
  background-color: #fff;
  display: flex;
  margin-top: 10px;
  .left {
    padding: 5px;
    width: calc(750rpx / 4);
    position: relative;
    top: 0;
    left: 0;
    .img {
      width: 100%;
      height: 100%;
    }
    .card-tag {
      position: absolute;
      top: 5px;
      left: 0;
      padding: 5px 10px;
      background-color: #ff0000;
      color: #ffffff;
      border-radius: 5px;
      font-size: 12px;
    }
  }
  .right {
    padding: 10px;
    width: calc(750rpx / 4 * 3);
    overflow: hidden;
    white-space: nowrap; //不换行
    text-overflow: ellipsis; //文本溢出用省略号代替
    .title {
      width: 100%;
      font-size: 20px;
      font-weight: 700;
      color: #000;
      line-height: 30px;
      height: 30px;
      overflow: hidden;
      white-space: nowrap; //不换行
      text-overflow: ellipsis; //文本溢出用省略号代替
    }
    .content {
      display: flex;
      justify-content: space-between;
      .totalprice {
        color: #ff0000;
      }
    }
    .village {
      display: flex;
      justify-content: space-between;
    }
    .tag {
      overflow: hidden;
      white-space: nowrap; //不换行
      text-overflow: ellipsis; //文本溢出用省略号代替
      display: flex;
      .content-tag {
        margin-right: 5px;
      }
    }
  }
}
</style>
